<template>
  <div class="customermanagementlist">
    <!-- 头部搜索部分 -->
    <div class="shareheader">
      <div class="shareheader_top">
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >日志时间:</span
          >
          <el-date-picker
            v-model="orderSearch.datepicker"
            type="datetimerange"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            value-format="timestamp"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
        <div style="min-width: 100px; margin: 5px 10px 18px 0px">
          <el-button
            type="primary"
            icon="el-icon-search"
            data-tracker="P63-1"
            @click="poplogLsitFn(1, 20)"
            >查询</el-button
          >
          <el-button
            data-tracker="P63-2"
            icon="el-icon-refresh-left"
            @click="resultClickFn"
            >重置</el-button
          >
        </div>
      </div>

    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      border
      stripe
      :max-height="maxheight"
    >
      <el-table-column fixed type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column fixed property="user_name" label="用户" width="280">
      </el-table-column>
      <el-table-column fixed property="type_name" label="日志类型" width="280">
      </el-table-column>
      <el-table-column fixed property="content" label="日志内容">
      </el-table-column>
      <el-table-column
        fixed
        property="create_time"
        label="日志时间"
        width="260"
      >
        <template slot-scope="scope">
          {{
            scope.row.create_time === 0
              ? ""
              : new Date(Number(scope.row.create_time) * 1000).toLocaleString()
          }}
        </template>
      </el-table-column>
      <el-table-column fixed property="ip" label="登录IP" width="220">
      </el-table-column>
    </el-table>
    <div class="sharecontent_header_left">
        <el-pagination
          small
          background
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  </div>
</template>
<script>
import { systemloglist } from "@/api/message";
export default {
  name: "poplog",
  components: {},
  data() {
    return {
      orderSearch: {
        datepicker: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      maxheight: "auto",
      tableData: [],
    };
  },
  mounted() {
    this.poplogLsitFn(this.pageNum, this.pageSize);
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.poplogLsitFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.poplogLsitFn(this.pageNum, this.pageSize);
    },
    poplogLsitFn(pageNumval, pageSizeval) {
      let data = {
        page: pageNumval,
        page_size: pageSizeval,
        create_time: {
          start_time:
            this.orderSearch.datepicker[0] / 1000
              ? this.orderSearch.datepicker[0] / 1000 + ""
              : "",
          end_time:
            this.orderSearch.datepicker[1] / 1000
              ? this.orderSearch.datepicker[1] / 1000 + ""
              : "",
        },
      };
      systemloglist(data).then((res) => {
        if (res.code === 10000 && res.data.list !== null) {
          this.tableData = res.data.list;
          if (this.tableData.length > 6) {
            this.maxheight = document.documentElement.clientHeight - 245;
          } else {
            this.maxheight = "auto";
          }
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        } else {
          this.tableData = [];
          this.pageNum = 1;
          this.pageSize = 20;
          this.totalListNum = 0;
        }
      });
    },
    //重置按钮
    resultClickFn() {
      this.orderSearch.datepicker = "";
      this.poplogLsitFn(this.pageNum, this.pageSize);
    },
  },
};
</script>
<style lang="less" scoped>
.customermanagementlist {
  padding: 10px 15px;
  background-color: #fff;
  .shareheader {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  .sharecontent_header_left {
    // float: right;
    display: flex;
    justify-content: flex-end;
    padding: 0px 8px 0px 0px;
  }
}
</style>
